import React, { useEffect } from "react";
import { Button, Modal, Form, Input, Radio } from "antd";
import {update} from '../../services/student';
import { useDispatch, useSelector } from "react-redux";
import { setUpdateVisible } from "../../store/slices/studentSlice";
export default function Update(props) {
    const [form] = Form.useForm();  
    let updateVisible = useSelector(state => state.student.updateVisible);
    let student = useSelector(state => state.student.student);
    let dispatch = useDispatch();
    const handleOk = async () => {
        console.log(form.getFieldsValue());
        await update({_id:student._id,...form.getFieldsValue()});
        props.show();
        // props.setIsModalOpen(false);
        dispatch(setUpdateVisible(false));
    };

    const handleCancel = () => {
        // props.setIsModalOpen(false);
        dispatch(setUpdateVisible(false));
    };
    console.log("render")
    useEffect(() => {
        form.setFieldsValue(student);
        // console.log(form.isFieldsTouched());
    },[student._id]);
    return (
        <div>
            <Modal
                title="修改"
                forceRender={true}
                open={updateVisible}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                    form={form}
                    name="updateForm"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="姓名"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: "Please input your username!",
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="年龄"
                        name="age"
                        rules={[
                            {
                                required: true,
                                message: "Please input your password!",
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="性别"
                        name="gender"
                        rules={[
                            {
                                required: true,
                                message: "Please input your password!",
                            },
                        ]}
                    >
                        <Radio.Group>
                            <Radio value="男">男</Radio>
                            <Radio value="女">女</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}
